<template>
  <div>
    <!--    <a-image

        />-->
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增
        </a-button>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"
                  :disabled="isDisabledAuth('system:user:export')"> 导出
        </a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
          导入
        </j-upload-button>
        <a-button type="primary" @click="openModal(true, {})" preIcon="ant-design:hdd-outlined">
          回收站
        </a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
              <a-menu-item key="2" @click="batchFrozen(2)">
                <Icon icon="ant-design:lock-outlined"></Icon>
                冻结
              </a-menu-item>
              <a-menu-item key="3" @click="batchFrozen(1)">
                <Icon icon="ant-design:unlock-outlined"></Icon>
                解冻
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
          >批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
      </template>
      <!--头单元格-->
      <template #headerCell="{title, column }">
        <template v-if="column.dataIndex === 'link_form1'">
          <a-popover title="链接1">
            <template #content>
              <div style="width:200px;height:200px">
                <img
                  src="https://haisuo-clue.oss-cn-hangzhou.aliyuncs.com/temp/Snipaste_2025-01-15_16-21-02_1736929772606.png"
                  style="object-fit: cover"
                  width="100%" height="100%">
              </div>
            </template>
            <a-space style="cursor: pointer">
              <span>   {{ column.customTitle }}  </span>
              <Icon icon="mdi-light:alert-circle"></Icon>
            </a-space>
          </a-popover>
        </template>
        <template v-else-if="column.dataIndex === 'link_form2'">
          <a-popover title="链接2">
            <template #content>
              <div style="width:200px;height:200px">
                <img
                  src="https://haisuo-clue.oss-cn-hangzhou.aliyuncs.com/temp/Snipaste_2025-01-15_16-21-09_1736929802552.png"
                  style="object-fit: cover"
                  width="100%" height="100%">
              </div>
            </template>
            <a-space style="cursor: pointer">
              <span>   {{ column.customTitle }}  </span>
              <Icon icon="mdi-light:alert-circle"></Icon>
            </a-space>
          </a-popover>


        </template>
        <template v-else>
          {{ column.customTitle }}
        </template>
      </template>

      <!--个性化单元格-->
      <template #bodyCell="{text, record, index, column}">
        <template v-if="column.dataIndex === 'link_form1'">
          <a-space align="center" style="cursor: pointer;color: var(--vxe-primary-color)">
            <a :href="`http://h5.haisuoshuju.cn/form1/${record.username}`"
               target="_blank">
              链接1
            </a>
            <Icon icon="solar:copy-linear"
                  @click="()=>copyToClip(`http://h5.haisuoshuju.cn/form1/${record.username}`)"></Icon>
          </a-space>
        </template>

        <template v-if="column.dataIndex === 'link_form2'">
          <a-space align="center" style="cursor: pointer;color: var(--vxe-primary-color)">
            <a :href="`http://h5.haisuoshuju.cn/form2/${record.username}`"
               target="_blank">
              链接2
            </a>
            <Icon icon="solar:copy-linear"
                  @click="()=>copyToClip(`http://h5.haisuoshuju.cn/form2/${record.username}`)"></Icon>
          </a-space>
        </template>

      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)"
                     :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <!--用户抽屉-->
    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
    <!--修改密码-->
    <PasswordModal @register="registerPasswordModal" @success="reload" />
    <!--用户代理-->
    <UserAgentModal @register="registerAgentModal" @success="reload" />
    <!--回收站-->
    <UserRecycleBinModal @register="registerModal" @success="reload" />
    <!-- 离职受理人弹窗 -->
    <UserQuitAgentModal @register="registerQuitAgentModal" @success="reload" />
    <!-- 离职人员列弹窗 -->
    <UserQuitModal @register="registerQuitModal" @success="reload" />
    <!-- 设置地区标签-->
    <UserTagAreaDrawer @register="registerUserTagArea" @success="reload" />
    <!--  设置三方平台-->
    <UserTpCarDrawer @register="registerTpCarDrawer" @success="reload" />
  </div>
</template>

<script lang="ts" name="system-user" setup>
//ts语法
import { ref, computed, unref } from "vue";
import { BasicTable, TableAction, ActionItem } from "/@/components/Table";
import UserDrawer from "./UserDrawer.vue";
import UserRecycleBinModal from "./UserRecycleBinModal.vue";
import PasswordModal from "./PasswordModal.vue";
import UserAgentModal from "./UserAgentModal.vue";
import JThirdAppButton from "/@/components/jeecg/thirdApp/JThirdAppButton.vue";
import UserQuitAgentModal from "./UserQuitAgentModal.vue";
import UserQuitModal from "./UserQuitModal.vue";
import { useDrawer } from "/@/components/Drawer";
import { useListPage } from "/@/hooks/system/useListPage";
import { useModal } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
import { columns, searchFormSchema } from "./user.data";
import {
  listNoCareTenant,
  deleteUser,
  batchDeleteUser,
  getImportUrl,
  getExportUrl,
  frozenBatch, refreshUserAppKey
} from "./user.api";
import { usePermission } from "/@/hooks/web/usePermission";
import UserTagAreaDrawer from "@/views/system/user/UserTagAreaDrawer.vue";
import UserTpCarDrawer from "@/views/system/user/UserTpCarDrawer.vue";
import { copyTextToClipboard } from "@/hooks/web/useCopyToClipboard";


const { createMessage, createConfirm } = useMessage();
const { isDisabledAuth } = usePermission();
//注册drawer
const [registerDrawer, { openDrawer }] = useDrawer();
//回收站model
const [registerModal, { openModal }] = useModal();
//密码model
const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
//代理人model
const [registerAgentModal, { openModal: openAgentModal }] = useModal();
//离职代理人model
const [registerQuitAgentModal, { openModal: openQuitAgentModal }] = useModal();
//离职用户列表model
const [registerQuitModal, { openModal: openQuitModal }] = useModal();
// 用户地区标签drawer
const [registerUserTagArea, { openDrawer: openUserTagArea }] = useDrawer();
// 用户三方平台drawer
const [registerTpCarDrawer, { openDrawer: openTpCarDrawer }] = useDrawer();

// 列表页面公共参数、方法
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  designScope: "user-list",
  tableProps: {
    title: "用户列表",
    api: listNoCareTenant,
    columns: columns,
    size: "small",
    formConfig: {
      // labelWidth: 200,
      schemas: searchFormSchema
    },
    actionColumn: {
      width: 120
    },
    beforeFetch: (params) => {
      return Object.assign({ column: "createTime", order: "desc" }, params);
    }
  },
  exportConfig: {
    name: "用户列表",
    url: getExportUrl
  },
  importConfig: {
    url: getImportUrl
  }
});

//注册table数据
const [registerTable, { reload, updateTableDataRecord }, {
  rowSelection,
  selectedRows,
  selectedRowKeys
}] = tableContext;

/**
 * 新增事件
 */
function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    showFooter: true,
    tenantSaas: false
  });
}

/**
 * 编辑事件
 */
async function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
    showFooter: true,
    tenantSaas: false
  });
}


const handleRefreshAppKey = async (record: Recordable) => {
  await refreshUserAppKey(record, reload);
};


/**
 * 详情
 */
async function handleDetail(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
    showFooter: false,
    tenantSaas: false
  });
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  if ("admin" == record.username) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }
  await deleteUser({ id: record.id }, reload);
}

/**
 * 标签地区设置
 */
const handleTagAreaSettings = (record) => {
  openUserTagArea(true, {
    user: record
  });
};

/**
 * 三方平台设置
 * @param record
 */
const handleTpCarSettings = (record) => {

  openTpCarDrawer(true, {
    user: record
  });
};


/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  let hasAdmin = unref(selectedRows).filter((item) => item.username == "admin");
  if (unref(hasAdmin).length > 0) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }
  await batchDeleteUser({ ids: selectedRowKeys.value }, () => {
    selectedRowKeys.value = [];
    reload();
  });
}

/**
 * 成功回调
 */
function handleSuccess() {
  reload();
}

/**
 * 打开修改密码弹窗
 */
function handleChangePassword(username) {
  openPasswordModal(true, { username });
}

/**
 * 打开代理人弹窗
 */
function handleAgentSettings(userName) {
  openAgentModal(true, { userName });
}

/**
 * 冻结解冻
 */
async function handleFrozen(record, status) {
  if ("admin" == record.username) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }
  await frozenBatch({ ids: record.id, status: status }, reload);
}

/**
 * 批量冻结解冻
 */
function batchFrozen(status) {
  let hasAdmin = selectedRows.value.filter((item) => item.username == "admin");
  if (unref(hasAdmin).length > 0) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }
  createConfirm({
    iconType: "warning",
    title: "确认操作",
    content: "是否" + (status == 1 ? "解冻" : "冻结") + "选中账号?",
    onOk: async () => {
      await frozenBatch({ ids: unref(selectedRowKeys).join(","), status: status }, reload);
    }
  });
}

/**
 *同步钉钉和微信回调
 */
function onSyncFinally({ isToLocal }) {
  // 同步到本地时刷新下数据
  if (isToLocal) {
    reload();
  }
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: "刷新key",
      popConfirm: {
        title: "刷新后之前的key将会失效,是否确认刷新key?",
        confirm: handleRefreshAppKey.bind(null, record)
      }
      // ifShow: () => hasPermission('system:user:edit'),
    },
    {
      label: "编辑",
      onClick: handleEdit.bind(null, record)
      // ifShow: () => hasPermission('system:user:edit'),
    }

  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: "详情",
      onClick: handleDetail.bind(null, record)
    },
    {
      label: "密码",
      //auth: 'user:changepwd',
      onClick: handleChangePassword.bind(null, record.username)
    },
    {
      label: "删除",
      popConfirm: {
        title: "是否确认删除",
        confirm: handleDelete.bind(null, record)
      }
    },
    {
      label: "冻结",
      ifShow: record.status == 1,
      popConfirm: {
        title: "确定冻结吗?",
        confirm: handleFrozen.bind(null, record, 2)
      }
    },
    {
      label: "解冻",
      ifShow: record.status == 2,
      popConfirm: {
        title: "确定解冻吗?",
        confirm: handleFrozen.bind(null, record, 1)
      }
    },
    {
      label: "标签地区",
      onClick: handleTagAreaSettings.bind(null, record)
    },
    {
      label: "三方平台",
      onClick: handleTpCarSettings.bind(null, record)
    }

    /* {
       label: '代理人',
       onClick: handleAgentSettings.bind(null, record.username),
     },*/


  ];
}


const copyToClip = (text) => {
  const success = copyTextToClipboard(text);
  if (success) {
    createMessage.success("已成功复制到剪贴板");
  } else {
    createMessage.warning("复制失败");
  }
};

/**
 * 离职
 * @param userName
 */
function handleQuit(userName) {
  //打开离职代理人弹窗
  openQuitAgentModal(true, { userName });
}
</script>

<style scoped></style>
